<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="layui/css/layui.css"  media="all">
 <script src="layui/layui.js" charset="utf-8"></script>

 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="js/vue.js"></script>	

<title>Insert title here</title>
</head>
<body>
<div style="margin-left: 50px;">
  <div>
<i class="layui-icon" style="font-size: 25px; color: #1E9FFF;">&#xe614;</i> 
  <h2 style="display: inline;">系统管理<i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe65b;</i>  部门管理</h2>
  </div>


<div id="showdept" style="float: left;margin-left: 50px;margin-top: 20px;">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;" >所有部门</a>
    <dl class="layui-nav-child">
      <dd v-for="dept in listdept" style="height: 45px;">
      <a @click="" href="javascript:;">{{dept.dept_name}}</a>
      
      	<span class="layui-btn-group" style="position: relative; left:103px;top:-38px;">
  
		  <button  @click="updateDept(dept.dept_id)" class="layui-btn layui-btn-primary layui-btn-sm">
		    <i class="layui-icon">&#xe642;</i>
		  </button>
		  <button @click="deleteDept(dept.dept_id)" class="layui-btn layui-btn-primary layui-btn-sm">
		    <i class="layui-icon">&#xe640;</i>
		  </button>
		</span>
      
      </dd>
     
    </dl>
  </li>
  
</ul>

</div>
<div id="deptform" style="float:right;margin-right: 500px;border-left: 1px black solid;">
<form class="layui-form" id="form">
 <div class="layui-form-item">
    <label class="layui-form-label">部门名称：</label>
    <div class="layui-input-inline">
    	<input id="deptid" type="hidden" :value="deptid" name="dept_id">
      <input id="deptname" :value="deptname" type="text" name="dept_name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">部门负责人编号</label>
    <div class="layui-input-inline" id="mana">
      
      <input id="managerid" :value="deptmanage" type="text" name="user.userid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">

    </div>
  </div>
  
  
  <div class="layui-form-item">
    <label class="layui-form-label">联系电话</label>
    <div class="layui-input-inline">
      <input id="phone" :value="deptphone" type="text" name="dept_phone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">传真</label>
    <div class="layui-input-inline">
      <input id="fax" :value="deptfax" type="text" name="dept_fax" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button id="addupdate" class="layui-btn layui-btn-normal" lay-filter="demo1">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
</div>


</body>
<script type="text/javascript">

 

layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    alert(elem.text());
  });
});

$(function(){ 
	
	var vue1=new Vue({
		el:"#deptform",//表单域
		data:{
			deptname:'',
			deptmanage:'',
			deptphone:'',
			deptfax:'',
			deptid:0
			
		},
		methods:{
			
		}
		
	});
	var url="../dept/add";
	$("#addupdate").click(function(){
		var dept_name=$("#deptname").val();//部门名称
		var managerid=$("#managerid").val();//管理人
		var phone=$("#phone").val();
		var fax=$("#fax").val();
		var deptid=$("#deptid").val();		
		$.ajax({
			url:url,
			type:'post',
			data:{
				"dept_id":deptid,
				"dept_name":dept_name,
				"user.userid":managerid,
				"dept_phone":phone,
				"dept_fax":fax
			},
			dataType:'text',
			async:false,
			success:function(result){
						console.log(result);
						alert("返回结果了1111后台分返回结果了 ----------------------------");
						if(result=="addsuccess"){
							alert("新增成功");
							
						}
						if(result=="updatesuccess"){
							alert("修改成功");
							url="../dept/add";
						}
						showdept();
						
				}
			
			});//ajax结束 
		
		
		
		
	});
	
	
	
	var vue=new Vue({
		el:'#showdept',//左侧部门展示
		data:{
			listdept:'',
		},
		methods:{
			updateDept:function(deptid){
				alert(deptid);
				
			
				$("#addupdate").text("修改");
				
				url="../dept/updateDept";
				
				vue1.deptid=deptid;
				$.ajax({
					url:'../dept/queryDept',
					type:'post',
					data:{"deptid":deptid},
					dataType:'json',
					success:function(result){
						alert("修改返回结果了11111");
						$.each(result,function(index,ele){
							/*
							修改时给表单赋值
							*/
							
							vue1.deptname=ele.dept_name;
							vue1.deptmanage=ele.user.userid;
							vue1.deptphone=ele.dept_phone;
							vue1.deptfax=ele.dept_fax;
						});					
				}
			
			});//ajax结束
				
			},
			deleteDept:function(deptid){//删除部门
				if(confirm("确认删除？")){
					$.ajax({
						url:'../dept/delDept',
						type:'post',
						data:{"deptid":deptid},
						dataType:'text',
						async:false,
						success:function(result){
							if(result=="delsuccess"){
								alert("删除成功");
								showdept();
							}
				}
				
					
					
			
			
		});//ajax结束
			}
		}
		
		}
	});
	function showdept(){
		$.ajax({
			url:'../dept/queryDept',
			type:'post',
			data:{"deptid":0},
			dataType:'json',
			success:function(result){
				//alert("查询所有部门返回结果了");
				vue.listdept=result;
				
			}
			
		});//ajax结束
		
		
	}
	showdept();
	
	
	
	
	
});


</script>
</html>